<template>
  <div style="width:100%;height:100%" class="position-relative">
    <index-header style="top:0;z-index:2" />
    <div class="h-87">
      <div style="width:16%" class="f-l">
        <div class="card " style="width:100%">
          <img src="~@/assets/img/left.png" style="vertical-align: middle;padding-bottom:3px" alt="" /> <span class="myfont">全部数据指标</span>
        </div>
        <div class="item-list" style="width:100%">
          <div v-for="(items, index) in itemlist" :key="index" class="item" style="height:90%" @click="getAnnualStatistics(items)">
            <div v-if="typeCode == items.code" class="item checked">{{ items.name }}</div>
            <div v-else class="item pointer">{{ items.name }}</div>
          </div>
        </div>
      </div>
      <div class="chart-box f-l">
        <div style="width:100%;height:10%;">
          <div class="title " style="width:100%; padding:0 20px">
            <div class=" f-l myfont">
              {{ name }}
            </div>
            <div class="f-40">· · ·</div>
            <div class=" f-l " style=" padding-left:40px"><img src="~@/assets/img/top.png" alt="" /> 同比增长:-</div>
            <div class=" f-l  " style=" padding-left:40px"><img src="~@/assets/img/bottom.png" alt="" /> 环比下降:-</div>
            <div class="f-r">
              <template>
                <el-radio v-model="radio" label="年">年</el-radio>
                <el-radio v-model="radio" disabled label="月">月</el-radio>
                <el-radio v-model="radio" disabled label="日">日</el-radio>
              </template>

              <template>
                <el-select v-model="label" placeholder="请选择乡镇">
                  <el-option label="全部" value="shanghai" />
                  <!-- <el-option label="杨陵街道" value="shanghai" />
                  <el-option label="五泉镇" value="shanghai" />
                  <el-option label="李台乡" value="shanghai" />
                  <el-option label="杨村乡" value="shanghai" />
                  <el-option label="大寨乡" value="shanghai" />
                  <el-option label="揉谷镇" value="shanghai" /> -->
                </el-select>
              </template>
            </div>
          </div>
        </div>
        <div style="width:100%;height:90%;padding:0 20px 20px">
          <v-chart v-if="typeCode == 'NCPLDLQFX'" :options="options" />
          <v-chart v-else :options="NCPGXSPFX" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import YlCharts from '@/components/Charts/ylCharts.vue'
import IndexHeader from '../component/IndexHeader2.vue'
import { getTowSideStat, getTowSideStatMonth } from '@/api/connector'
export default {
  name: 'Fourstage',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    YlCharts,
    IndexHeader
  },
  data() {
    return {
      name: '',
      label: '全部',
      radio: '年',
      isShow: false,
      typeCode: 'NCPGXSPFX',
      itemlist: [
        {
          name: '农产品供销水平分析',
          code: 'NCPGXSPFX'
        },
        {
          name: '农产品劳动力需求分析',
          code: 'NCPLDLQFX'
        }
      ],
      options: {
        title: {
          text: ' '
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
              htmlStr += seriesName + '：' + value + '人/天' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          data: ['已有劳动力', '需求劳动力']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 坐标轴两边留白
          data: [],
          axisLabel: {
            // 坐标轴刻度标签的相关设置。
            interval: 0, // 设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
              color: '#fff',
              fontStyle: 'normal',
              fontFamily: '微软雅黑',
              fontSize: 12
            }

            // rotate:50,
          },
          axisTick: {
            // 坐标轴刻度相关设置。
            show: true
          },
          axisLine: {
            // 坐标轴轴线相关设置
            lineStyle: {
              color: '#E5E9ED'
              // opacity:0.2
            }
          }
        },
        yAxis: [
          {
            name: '人/天',
            type: 'value',
            splitNumber: 5,
            axisLabel: {
              textStyle: {
                color: '#fff',
                fontStyle: 'normal',
                fontFamily: '微软雅黑',
                fontSize: 12
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: '#fff'
                // 	opacity:0.1
              }
            }
          }
        ],
        series: [
          {
            name: '已有劳动力',
            type: 'line',
            itemStyle: {
              normal: {
                color: '#1b3457',
                lineStyle: {
                  color: '#fff',
                  width: 1
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(58,132,255,0)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(58,132,255,0.35)'
                    }
                  ])
                }
              }
            },
            data: []
          },
          {
            name: '需求劳动力',
            type: 'line',
            itemStyle: {
              normal: {
                color: 'rgba(255,80,124,1)',
                lineStyle: {
                  color: '#fff',
                  width: 1
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: 'rgba(255,80,124,0)'
                    },
                    {
                      offset: 1,
                      color: '#fff'
                    }
                  ])
                }
              }
            },
            data: []
          }
        ]
      },
      options1: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: [],
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          name: '年',
          type: 'category',
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7'],
          textStyle: {
            color: '#fff'
          },
          axisLine: {
            lineStyle: { color: '#fff' }
          }
        },
        yAxis: {
          name: '万元',
          type: 'value',
          axisLine: {
            lineStyle: { color: '#fff' }
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            name: '',
            data: [],
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#e9f7ff'
                }
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(247, 173, 38, 0.2)'
              }
            }
          },
          {
            name: '',
            data: [],
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#e9f7ff'
                }
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(101, 70, 253, 0.2)'
              }
            }
          },
          {
            name: '',
            data: [],
            type: 'line',
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#e9f7ff'
                }
              }
            },
            areaStyle: {
              normal: {
                color: 'rgba(26, 215, 133, 0.2)'
              }
            }
          }
        ]
      },
      NCPGXSPFX: {
        grid: {
          bottom: 80
        },
        toolbox: {},
        tooltip: {
          trigger: 'axis',
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' // 一个点
              htmlStr += seriesName + '：' + value + '吨' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          },
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765'
            }
          }
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: { onZero: false },
            data: []
          }
        ],
        yAxis: [
          {
            name: '农产品供应量(吨)',
            type: 'value'
          },
          {
            name: '农产品需求量(吨)',
            type: 'value'
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },

            data: []
          },
          {
            name: '',
            type: 'line',
            yAxisIndex: 1,
            animation: false,
            areaStyle: {},
            lineStyle: {
              width: 1
            },

            data: []
          }
        ]
      }
    }
  },
  created() {
    this.getAnnualStatistics(this.itemlist[0])
  },

  methods: {
    getAnnualStatistics(item) {
      this.isShow = false
      this.typeCode = item.code
      this.name = item.name
      if (item.code === 'NCPLDLQFX') {
        const params = {
          groupCode: item.code,
          dateType: 'month'
        }
        getTowSideStatMonth(params).then((res) => {
          this.options.xAxis.data = res.body.dateSet
          this.options.yAxis.name = res.body.yAxisUnit
          for (const i in res.body.typeSet) {
            this.options.series[i].data = res.body.typeValueListMap[res.body.typeSet[i]]
          }
        })
      } else {
        const params1 = {
          groupCode: item.code,
          dateType: 'month'
        }
        getTowSideStatMonth(params1).then((res) => {
          const data = res.body
          this.NCPGXSPFX.yAxis.name = res.body.yAxisUnit
          this.NCPGXSPFX.xAxis[0].data = data.dateSet
          this.NCPGXSPFX.series[0].name = data.typeSet[0]
          this.NCPGXSPFX.series[0].data = data.typeValueListMap['供应量']
          this.NCPGXSPFX.series[1].name = data.typeSet[1]
          this.NCPGXSPFX.series[1].data = data.typeValueListMap['需求量']
          setTimeout(() => {
            this.option = this.NCPGXSPFX
          }, 500)
        })
      }
    }
  }
}
</script>
<style lang="scss">
* {
  padding: 0;
}
#app {
  height: 100%;
}
.item-list {
  max-height: 86.4%;
  border: 1px solid #155277;
  overflow: auto;
  scroll-behavior: smooth;
}
.item {
  border-bottom: 1px solid #155277;
  background: rgba(19, 34, 53, 0.8);
}

.checked {
  background: #192f4b;
  border: solid 1px #155277;
}

.app-container {
  width: 100%;
  height: 100%;
}
.echarts {
  width: 100%;
  height: 100%;
}
.chart-box {
  height: 98%;
  width: 80%;
  margin-left: 2%;
  line-height: 75px;
  border: 1px solid #155277;
  box-sizing: border-box;
  background: #132235;
  opacity: 0.8;
}
.chart-box[data-bottom] {
  background: url(~@/assets/img/bottom-box.png) no-repeat;
  background-size: 100% 100% !important;
}
.item-list .item {
  width: 100%;
  text-align: center;
  height: 68px;
  line-height: 68px;
  color: #fff;
}
.title {
  font-size: 18px;
  height: 68px;
  line-height: 68px;
  border-bottom: 1px solid #155277;
  color: rgba(255, 255, 255, 1);
}
.myfont {
  font-family: myfont;
  font-size: 24px;
  background-image: -webkit-linear-gradient(bottom, #082942, #dff5fe, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 999;
}
.f-l {
  float: left;
}
.f-r {
  float: right;
}
.card {
  height: 75px;
  line-height: 75px;
  text-align: center;
  font-family: myfont;
  background: url(~@/assets/img/card.png) no-repeat;
  background-size: 100% 100%;
  color: rgba(255, 255, 255, 1);
}

.el-input__inner {
  background-color: #1b2b4c;
  border: 1px solid #26455f;
}
.el-radio__inner {
  background: #153155;
}
.el-radio {
  color: #fff;
}
.el-radio__input.is-checked .el-radio__inner {
  background: #153155;
  color: #ffffff !important;
}
input {
  -webkit-text-fill-color: #fff;
}
.f-40 {
  padding-left: 24px;
  font-size: 40px;
  color: #30616e;
  float: left;
}
.el-select-dropdown {
  background-color: #2a436a;
  color: #ffffff;
}
.el-select-dropdown__item.hover {
  background-color: #1e365a;
  color: #ffffff;
}
.el-select-dropdown__item.selected {
  color: #ffffff;
}
.el-select-dropdown__item {
  color: #ffffff;
}
.el-select-dropdown {
  border: 0;
}
.el-popper[x-placement^='bottom'] .popper__arrow::after {
  border-bottom-color: #2a436a;
  top: 0px;
}
</style>
